<style>
div{
  height:88px;
}
#d1{
 
  text-align:center;
 
}
#d2{
  background:orange;
  text-align:center;
  

}
#d3{
 
  text-align:center;

}

#d4{
  background:green;
  text-align:center;

}

#d5{
  
  text-align:center;

}
#d6{
  background:blue;
  text-align:center;

}

#d7{
 
  text-align:center;
;
}
.c1{
  width:200px;
  height:200px;
  animation:al 2s linear 150;
  border-radius:50%;
  background:url(1.jpeg);
  background-size:100%;
}
.c2{
  width:200px;
  height:200px;
  animation:al 2s linear 150;
  border-radius:50%;
  background:url();
  background-size:100%;
}
.c3{
  width:200px;
  height:200px;
  animation:al 2s linear 150;
  border-radius:50%;
  background:url(2.jpg);
  background-size:100%;
}
.c4{
  width:200px;
  height:200px;
  animation:al 2s linear 150;
  border-radius:50%;
  background:url();
  background-size:100%;
}
.c5{
  width:200px;
  height:200px;
  animation:al 2s linear 150;
  border-radius:50%;
  background:url(3.jpg);
  background-size:100%;
}
.c6{
  width:200px;
  height:200px;
  animation:al 2s linear 150;
  border-radius:50%;
  background:url();
  background-size:100%;
}
.c7{
  width:200px;
  height:200px;
  animation:al 2s linear 150;
  border-radius:50%;
  background:url(4.jpg);
  background-size:100%;
}
@keyframes al{ 
  0%{
      transform:rotate(0deg);
}
  100%{
      transform:rotate(360deg);
}
  
}

</style>
<div id="d1" class="c1">1</div>
<div id="d2" class="c2">2</div>
<div id="d3" class="c3">3</div>
<div id="d4" class="c4">4</div>
<div id="d5" class="c5">5</div>
<div id="d6" class="c6">6</div>
<div id="d7" class="c7">7</div>